<template>
	<div class="mybutton">
		<button :class="cls" @click="login">{{ value }}</button>
	</div>
</template>

<script>
import {requestLogin} from '@/plugins/api/login.js';
import {mapGetters, mapMutations} from 'vuex';

export default {
	name: 'mybutton',
	props: ['phone', 'password', 'value', 'cls'],
	data() {
		return {};
	},
	watch: {},
	computed: {
		...mapGetters({
			getToken: 'getToken'
		})
	},
	created() {

	},
	mounted() {

	},
	methods: {
		...mapMutations({
			setToken: 'setToken'
		}),
		login() {
			if (!this.phone || !this.password) {
				alert('请输入手机号和密码');
				return;
			}
			let res = /^1([3456789])\d{9}$/, res1 = /^(\w|@){6,18}$/;
			if (!res.test(this.phone) || !res1.test(this.password)) {
				alert('输入格式有误');
				return;
			}
			let obj = {
				mobile: this.phone,
				pwd: this.password
			};
			requestLogin(obj).then(res => {
				this.setToken(res.data.token);
				this.$router.push('/home');
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.mybutton {
  .dl {
    color: #fff;
    width: 12rem;
    height: 3rem;
    box-shadow: 0 5px 3px rgba(0, 0, 0, .3);
    font-weight: 700;
    border-radius: 3px;
    background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
    display: block;
    margin: 12px auto;
  }

  .setBtn {
    color: #fff;
    width: 12rem;
    height: 2.4rem;
    font-weight: 700;
    border-radius: 3px;
    background: linear-gradient(90deg, #5ea6f8, #bb87f6);
    display: block;
    margin: 12px auto;
  }
}
</style>